<template>
    <div id="page_login" :class="compControl.background.computeBGclass">
        <component :is="Header" />
        <div id="container_loginbox">
            <div class="loginbox decorations d-phone-none"></div>
            <div class="loginbox decorations d-phone-none"></div>
            <div class="loginbox decorations d-phone-none"></div>
            <div class="loginbox mask" id="loginform">
                <div class="mask" :class="loginbox_staus_class">
                    <section id="login">
                        <h1 class="title">
                            登录
                            <span style="right: 0" @click="loginbox_staus_class = 'inregister'">
                                注册>
                            </span>
                        </h1>
                        <div>
            
                            <n-form
                                :model="compControl.form.value"
                                label-placement="left"
                                label-width="3.5rem">
                                <n-form-item label="用户名">
                                    <n-input
                                        type="text"
                                        v-model:value="compControl.form.value.username"
                                        placeholder="用户名/手机/邮箱"
                                        clearable
                                        :input-props="{ autocomplete: 'on' }" />
                                </n-form-item>
                                <n-form-item label="密码" class="wrapper-mb-4">
                                    <n-input
                                        type="password"
                                        v-model:value="compControl.form.value.password"
                                        placeholder="密码"
                                        clearable
                                        show-password-on="click"
                                        :input-props="{ autocomplete: 'on' }" />
                                </n-form-item>

                                <n-form-item label="设置" class="wrapper-mb-8">
                                    <n-radio-group
                                        v-model:value="compControl.form.value.setting.remember">
                                        <n-radio :value="true" label="记住我" :disabled="true" />
                                        <n-radio
                                            :value="false"
                                            label="不记录信息"
                                            :default-checked="true" />
                                    </n-radio-group>
                                </n-form-item>
                                <n-form-item label=" " style="margin-top: -1rem">
                                    <n-space>
                                        <n-button
                                            type="warning"
                                            @click="compControl.form.handleResetForm">
                                            &ensp;清空&ensp;
                                        </n-button>
                                        <n-button
                                            type="primary"
                                            @click="compControl.form.axp_login(compControl.form.value)">
                                            &ensp;登录&ensp;
                                        </n-button>
                                    </n-space>
                                </n-form-item>
                            </n-form>
                        </div>
                    </section>
                    <div class="devider"></div>
                    <section id="register">
                        <h1 class="title">
                            <span style="left: 0" @click="loginbox_staus_class = 'inlogin'">
                                &lt;登录
                            </span>
                            注册
                        </h1>
                        <div style="padding-right: 1rem">
                            <n-form
                                :model="compControl.form.value"
                                label-placement="left"
                                label-width="4.25rem">
                                <n-form-item label="用户名">
                                    <n-input
                                        type="text"
                                        placeholder="用户名/手机/邮箱"
                                        clearable
                                        :input-props="{ autocomplete: 'on' }" />
                                </n-form-item>
                                <n-form-item label="密码">
                                    <n-input
                                        type="password"
                                        placeholder="密码"
                                        clearable
                                        show-password-on="click"
                                        :input-props="{ autocomplete: 'on' }" />
                                </n-form-item>
                                <n-form-item label="确认密码" class="wrapper-mb-4">
                                    <n-input
                                        type="password"
                                        placeholder="密码"
                                        clearable
                                        show-password-on="click"
                                        autocomplete="off"
                                        :input-props="{ autocomplete: 'off' }" />
                                </n-form-item>
                                <n-form-item label="设置" class="wrapper-mb-8">
                                    <n-radio-group
                                        v-model:value="compControl.form.value.setting.remember">
                                        <n-radio :value="true" label="记住我" :disabled="true" />
                                        <n-radio
                                            :value="false"
                                            label="不记录信息"
                                            :default-checked="true" />
                                    </n-radio-group>
                                </n-form-item>
                                <n-form-item label=" " style="margin-top: -1rem">
                                    <n-space>
                                        <n-button
                                            type="warning"
                                            @click="compControl.form.debug_skip_login">
                                            跳过
                                        </n-button>
                                    </n-space>
                                </n-form-item>
                            </n-form>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <hr style="min-height: 28.5rem; height: calc(83vh - 3rem); border: none" />
        <component :is="Footer" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import Header from './component/header.vue'
import Footer from './component/footer.vue'
import { useRouter } from 'vue-router'
import { accountform, type AccountForm } from '@/utils/interface/Admins'
import axiosInstance from '@/utils/network/axios'
import type { AxiosResponse } from 'axios'
import { useMessage } from 'naive-ui'
import { createMD5 } from '@/utils/encryption/myMD5'
import { useMainStore } from '@/utils/store'

const store = useMainStore()
const router = useRouter()
const message = useMessage()
const compControl = reactive({
    form: {
        value: JSON.parse(JSON.stringify(accountform)),
        handleResetForm() {
            const tf = new Map(Object.entries(accountform))
            for (let key of tf.keys()) {
                compControl.form.value[key] = tf.get(key)
            }
        },
        axp_login(data: AccountForm) {
            const D: AccountForm = JSON.parse(JSON.stringify(data))
            delete D['password_confirm']
            D.password = createMD5(D.password)
            axiosInstance.post('/login', D).then((response: AxiosResponse) => {
                if (response.data.status) {
                    store.app.initlized = true
                    message.success('登录成功')
                    router.push({ name: 'dashboard' })
                } else {
                    message.error('登录失败: ' + response.data.text)
                }
            })
        },
        debug_skip_login() {
            store.app.initlized = true
            message.success('跳过登录')
            router.push({ name: 'dashboard' })
        }
    },
    background: {
        computeBGclass: computed(() => {
            const t = new Date()
            const h = t.getHours()
            if (h > 6 && h < 13) {
                return 'bg-day'
            } else if (h >= 13 && h < 17) {
                return 'bg-afternoon'
            } else if (h >= 17 && h < 19) {
                return 'bg-twilight'
            } else {
                return 'bg-night'
            }
        }),
        computeBGstyle: computed(() => {
            const t = new Date()
            const h = t.getHours()
            if (h > 6 && h < 13) {
                return "background-image: url('/static/img/day2.jpg')"
            } else if (h >= 13 && h < 17) {
                return "background-image: url('/static/img/afternoon.jpg')"
            } else if (h >= 17 && h < 19) {
                return "background-image: url('/static/img/twilight.jpg')"
            } else {
                return "background-image: url('/static/img/night.jpg')"
            }
        })
    }
})

const loginbox_staus_class = ref('init')
</script>

<style lang="scss" scoped>
@use './assets/form.scss';
@use './assets/background.scss';

#page_login {
    width: 100%;
    //height: 100vh;
    min-height: 580px;
    padding: 0;
    box-sizing: border-box;

    /* ----------------L O G I N--------------- */
    #container_loginbox {
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;
        margin-top: 22vh;

        .loginbox {
            //.loginbox是定义3个矩形
            border: 1.5px solid #f0f0f0f0;
            position: absolute;
            max-width: 500px;

            width: 100%;
            height: 400px;

            @media (max-width: 524px) {
                //500px / 0.95 = 524px
                max-width: 95vw;
            }

            &.decorations {
                &:nth-child(1) {
                    border-radius: 25px;
                    rotate: -15deg;
                    z-index: 1;
                    background-color: form.$bg-1;
                    opacity: 0.425;
                }

                &:nth-child(2) {
                    border-radius: 10px;
                    rotate: -8deg;
                    z-index: 2;
                    background-color: form.$bg-2;
                    opacity: 0.5;
                }

                &:nth-child(3) {
                    border-radius: 10px;
                    rotate: 6deg;
                    z-index: 2;
                    background-color: form.$bg-3;
                    opacity: 0.3;
                }
            }
        }
    }

    /* ----------------footer--------------- */
}
</style>
